<html>
<head>
<link rel="stylesheet" href="./css/bootstrap-responsive.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" media="all" />
<script src="./js/bootstrap.min.js"></script>
<script>
var pinMode = false;
var isOpenLog = true;
var oSocket;
if ('WebSocket' in window) {
    oSocket = new WebSocket("ws://[##LOGSOCKETIPADDRESS##]]:[##PORT##]");
 
    oSocket.onmessage = function (e) { 
        console.log(e.data);
        var array_data = e.data.split("://");
        if(array_data[0] == "LogS") {
        	if(array_data[1] == "LOGOPEN") {
        		if(array_data[2] != "OK") {
            		alert("Invalid Request!");
            	}
        	}
			else if(array_data[1] == "LOGCLOSE") {
        		if(array_data[2] != "OK") {
            		alert("Invalid Request!");
            	}
        	}
			else if(array_data[1] == "SERVERLIST") {
				if(array_data[2] == "OK") {
					var server_array = array_data[3].split("\+");
					var i = 0
					var added ="";
					while(i < server_array.length) {
						added += "<li><input type='checkbox' name='serverCheck' value='"+server_array[i]+"' onclick='changeServerCheck()'><span style='color:#666;'>&nbsp;&nbsp;"+server_array[i]+"</input></li>";
						i++;
					}
					document.getElementById("serverListArea").innerHTML = added;
            	} else {
            		alert("Invalid Request!");
            	}
        	}
        	else if(array_data[1] == "DO") {
        		document.getElementById("realTimeLogArea").innerHTML += (array_data[2] + "<br>");
     	        if(!pinMode) {
     		        var objDiv = document.getElementById("realTimeLogArea");
     		        objDiv.scrollTop = objDiv.scrollHeight;
     	        }
        	}
        } else {
        	alert("Invalid Request!");
        }
    };
 
    oSocket.onopen = function (e) {
        console.log("open");
    };
 
    oSocket.onclose = function (e) {
        console.log("close");
    };
}

function pinToggle() {
	pinMode = !pinMode;
	if(pinMode) {
		document.getElementById("pinToggle").value="UNPIN"
	} else {
		document.getElementById("pinToggle").value="PIN"
	}
}

function cleanLog() {
	document.getElementById("realTimeLogArea").innerHTML = "";
}

function receiveToggle() {
	isOpenLog = !isOpenLog;
	if(isOpenLog) {
		document.getElementById("receiveToggle").value="UNRECEIVE"
		oSocket.send("LogS://LOGOPEN");
	} else {
		document.getElementById("receiveToggle").value="RECEIVE"
		oSocket.send("LogS://LOGCLOSE");
	}
}

function reqServerList() {
	oSocket.send("LogS://SERVERLIST");
}

function setServerEnable(enableServer) {
	oSocket.send("LogS://ADDSERVER://"+enableServer);
}

function setServerDisable(enableServer) {
	oSocket.send("LogS://DELSERVER://"+enableServer);
}

function changeServerCheck() {
	var servers = document.getElementsByName("serverCheck");
	var i = 0;
	while(i < servers.length) {
		if(servers[i].checked == true) {
			setServerEnable(servers[i].value);
		} else {
			setServerDisable(servers[i].value);
		}
		i++;
	}
}
</script>

</head>
<body style="height:100%;">

<div id="header" style="height:6%;background:#5BB52D;vertical-align:bottom;">
	<div style="text-align:center;font-size:25px;color:#F2F5F6;">LogS</div>
	<hr style="text-align:center;font-size:25px;color:#F2F5F6;margin-top:7px;"/>
</div>

<div id="controller" style="text-align:center;background:#5BB52D;height:6%;vertical-align:middle;">
	<input type="button" id="pinToggle" onclick="javascript:pinToggle();" value="PIN" style="background:#F2F5F6;color:#5BB52D">
	<input type="button" id="clear" onclick="javascript:cleanLog();" value="CLEAN" style="background:#F2F5F6;color:#5BB52D">
	<input type="button" id="receiveToggle" onclick="javascript:receiveToggle();" value="UNRECEIVE" style="background:#F2F5F6;color:#5BB52D">
	<input type="button" id="reqServerList" onclick="javascript:reqServerList();" value="REFRESHSERVER" style="background:#F2F5F6;color:#5BB52D">
</div>

<div id="container" style="height:85%;background:#5BB52D;">
	<div id="realTimeLogArea" style="float:left;width:60%;height:100%; background:#000; color:white; overflow-y:scroll;"></div>
	<div style="float:right;width:40%;height:100%; background:#eee; ">
		<ul id="serverListArea">
		</ul>
	</div>
	<div style="clear:both;height:1px"></div>
</div>

<div id="footer" style="text-align:center;height:3%;background:#5BB52D;color:#F2F5F6;">
	Copyright(c) 2013 <a href="mailto:bluemirr5@gmail.com" style="color:#F2F5F6;"><b>bluemirr5@gmail.com</b></a>
</div>
</body>
</html>